<!-- 门店列表 筛选器 -->
<template>
  <div id="o2o-option-menu">
    <template v-if="isshowO2oOptionMenu">
      <van-sticky>
        <div class="o2o-option-menu-list">
          <div
            class="o2o-option-menu-list-child"
            :class="{ 'active-ment-class': parentActive == item.value, 'active-text-color': isShowSubContent && activeType == item.value }"
            @click.stop="onOptionsItemClick(item, index)"
            v-for="(item, index) in option"
            :key="index"
          >
            {{ item.text }}
            <div :class="[isShowSubContent && activeType == item.value ? 'rotate-icon' : 'close-icon']" v-if="item.subs"><i class="iconfont icon-member-bottom"></i></div>
          </div>
          <transition name="folds">
            <div class="options-sub-content" v-if="isShowSubContent">
              <ul class="options-sub-content-list" @touchmove.stop>
                <template v-if="successLocation">
                  <li
                    class="options-sub-content-list-item"
                    :class="{ 'active-ment-class': subs_select == items.id }"
                    v-for="(items, i) in selectOption"
                    :key="i"
                    @click="onSubOptionsItemClick(items, i)"
                  >
                    {{ items.name }}
                  </li>
                </template>
                <template v-else
                  ><li class="options-sub-content-list-item">
                    定位中...
                  </li></template
                >
              </ul>
              <div class="options-select">
                <div class="options-select-btn" @click.stop="resetFilter">重置</div>
                <div class="options-select-btn " :class="{ 'active-text-color': !subs_select }" @click.stop="filterData">筛选</div>
              </div>
            </div>
          </transition>
        </div>
      </van-sticky>
      <van-overlay :show="isShowSubContent" @click.stop="cloneFilter" :custom-style="{ zIndex: '6' }" />
    </template>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      lat: 0,
      lng: 0,
      city: "",
      parentActive: null,
      ok_subs_select: null, //确定请求的二级选项参数
      subs_select: null,
      successLocation: false, //有定位信息
      activeType: "",
      isshowO2oOptionMenu: false, //是否开启组件
      option: [],
      selectOption: [], //二级筛选器选项
      isShowSubContent: false, //二级筛选器选项显隐，

      isOpenMoreChild: false //用于父组件获取，判断是否使用该子组件的加载更多
    };
  },

  // activated: {},
  components: {},
  computed: {},
  mounted() {
    this.getStoreSearchMenu();
  },

  methods: {
    onOptionsItemClick(item, i) {
      if (!this.successLocation) {
        Toast("定位中，请稍等...");
        return;
      }
      if (!item.subs && this.parentActive == item.value) {
        //取消筛选
        this.resetFilter();
        return;
      }

      if (item.subs) {
        if (this.activeType == item.value && this.isShowSubContent) {
          this.isShowSubContent = false;
          return;
        }
        this.selectOption = item.child;
        this.isShowSubContent = true;
        this.subs_select = this.ok_subs_select;
        // if (this.activeType != item.value) {
        //   this.$nextTick(() => {
        //     setTimeout(() => {
        //       this.isShowSubContent = true;
        //     }, 80);
        //   });
        // }
      } else {
        this.isShowSubContent = false;
        this.subs_select = null;
      }
      this.activeType = item.value;
      if (!item.subs) {
        this.parentActive = this.activeType;
        this.getData();
      }
    },
    onSubOptionsItemClick(items) {
      // this.subs_select = this.subs_select == items.id ? null : items.id;
      this.subs_select = items.id;
    },
    cloneFilter() {
      this.isShowSubContent = false;
    },
    resetFilter() {
      //重置筛选条件
      this.subs_select = null;
      this.parentActive = null;
      this.isShowSubContent = false;
      this.$parent.gotoSearch();
    },
    filterData() {
      if (this.subs_select) {
        this.parentActive = this.activeType;
      }
      this.getData();
      this.isShowSubContent = false;
    },
    getStoreSearchMenu() {
      $http.get("plugin.store-cashier.frontend.store.goods.get-store-search-praise", {}).then(response => {
        if (response.result === 1) {
          this.isshowO2oOptionMenu = response.data.is_open_store_search;
          this.$emit('searchSet',response.data.search_default_set);
          if(!this.isshowO2oOptionMenu) return;
          if (this.$route.params.city && this.$route.params.city !== "1") {
            this.city = this.$route.params.city;
            let p = this.fun.bd_encrypt(JSON.parse(this.$route.params.point).lng, JSON.parse(this.$route.params.point).lat);
            this.point = JSON.parse(this.$route.params.point);
            this.lat = p.lat;
            this.lng = p.lng;
            this.successLocation = true;
          } else {
            this.fun.getLocation()
              .then((res) => {
                this.lat = res.point.lat;
                this.lng = res.point.lng;
                this.city = res.city;
                this.successLocation = true;
              })
              .catch((err) => {
                console.log(err);
              });
          }
          if (response.data.is_category_ids == 1) {
            this.option.push({
              text: "门店分类",
              value: "classify",
              subs: true,
              child: response.data.categories
            });
          }
          if (response.data.is_distance == 1) {
            this.option.push({
              text: "离我最近",
              value: "distance",
              subs: true,
              child: [
                { name: "1km内", id: 1 },
                { name: "3km内", id: 3 },
                { name: "5km内", id: 5 },
                { name: "10km内", id: 10 }
              ]
            });
          }
          if (response.data.is_open_praise == 1) {
            this.option.push({ text: "好评优先", value: "is_open_praise", subs: false });
          }
          if (response.data.is_open_sales_volume == 1) {
            this.option.push({ text: "销量最高", value: "is_open_sales_volume", subs: false });
          }
          if (response.data.goods_show == 1) {
            this.option.push({ text: "优惠力度", value: "goods_show", subs: false });
          }
        }
      });
    },
    getData() {
      let json = {
        lng: this.lng,
        lat: this.lat,
        city_name: this.city,
        is_type: this.activeType
      };
      if (this.activeType == "classify") {
        json.category_id = this.subs_select;
      }
      if (this.activeType == "distance") {
        json.is_distance = this.subs_select;
      }
      this.$parent.stores = [];
      let _url = "plugin.store-cashier.frontend.store.goods.get-store-search";
      $http.post(_url, json, ".", true).then(response => {
        if (response.result === 1) {
          this.isOpenMoreChild = true;
          this.ok_subs_select = this.subs_select;
          this.$parent.isLoadMore = true;
          this.$parent.total_page = response.data.last_page;
          if (!this.$parent.total_page) {
            this.$parent.total_page = 0;
          }
          this.$parent.page = 1;
          this.$parent.stores = response.data.data;
        } else {
          Toast(response.msg);
          this.$parent.stores = [];
        }
      });
    },
    //获取更多数据
    getChildrenMoreData() {
      let json = {
        lng: this.lng,
        lat: this.lat,
        city_name: this.city,
        is_type: this.activeType
      };
      if (this.activeType == "classify") {
        json.category_id = this.subs_select;
      }
      if (this.activeType == "distance") {
        json.is_distance = this.subs_select;
      }
      this.$parent.isLoadMore = false; // 防止多次请求分页数据
      if (this.$parent.page >= this.$parent.total_page) {
        return;
      } else {
        this.$parent.page = this.$parent.page + 1;
        json.page = this.$parent.page;
        $http.get("plugin.store-cashier.frontend.store.goods.get-store-search", json, "加载中").then(
          response => {
            this.$parent.isLoadMore = true;
            if (response.result === 1) {
              var myData = response.data.data;
              this.$parent.stores = this.$parent.stores.concat(myData); //数组拼接
            } else {
              this.$parent.page = this.$parent.page - 1;
              this.$parent.isLoadMore = false;
            }
          },
          function(response) {
            // error callback
          }
        );
      }
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#o2o-option-menu {
  .o2o-option-menu-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 10px;
    background: #fff;
    z-index: 99;
    position: relative;

    .o2o-option-menu-list-child {
      display: flex;
      align-items: center;
    }
  }

  .active-ment-class {
    color: #ff2c29;
    font-weight: 700;
  }

  .active-text-color {
    color: #999 !important;
  }

  .rotate-icon {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transition: transform 0.5s;
  }

  .close-icon {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transition: transform 0.5s;
  }
  // 子选项内容区
  .options-sub-content {
    // 脱离标准文档流
    position: absolute;
    width: 100%;
    height: 13.625rem;
    top: 2.425rem;
    left: 0;
    padding: 0 0.75rem;
    background-color: #fff;
    text-align: left;
    display: flex;
    flex-direction: column;

    .options-sub-content-list {
      flex: 1;
      overflow: hidden;
      overflow-y: auto;
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
    }

    .options-sub-content-list::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

    .options-sub-content-list-item {
      position: relative;
    }

    .options-sub-content-list-item::after {
      height: 1px;
      position: absolute;
      z-index: 0;
      bottom: 0;
      left: 0;
      content: "";
      width: 100%;
      background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
    }

    .options-select {
      height: 2.75rem;
      line-height: 2.75rem;
      display: flex;
      justify-content: space-between;

      .options-select-btn {
        width: 49%;
        text-align: center;
        color: #fe5e56;
        font-size: 16px;
      }

      .options-select-btn:nth-child(1) {
        border-right: 1px solid #ececec;
        color: #999;
      }
    }
  }

  .folds-enter-active {
    transition: all 0.3s ease;
  }

  .folds-leave-active {
    transition: all 0s ease;
  }

  .folds-enter,
  .folds-leave-to {
    // opacity: 0;
    height: 0;
  }
}
</style>
